@charset "UTF-8";
@import "fb-function";
@import (reference) "fb-common";
@import (reference) "main";

/**
*产品样式表
*2017-08-28
*徐继强
*引用 fb-function.less构造函数样式   fb-common.less主体函数样式
*/
//搜索模块
.pro-search-box {
  border-bottom: 1px solid #e4e4e4;
  padding-top: 20px;
  .search-bar {
    label {
      display: inline-block;
    }
    a.fb-btn {
      display: inline-block;
      padding: 0 35px;
      margin-left: 30px;
    }
  }
  .filtrate-bar {
    padding-bottom: 30px;
    .filtrate-item {
      margin-top: 30px;
      font-size: 18px;
      color: #333333;
      span {
        display: inline-block;
        width: 90px;
      }
      label {
        display: inline-block;
        a {
          display: inline-block;
          margin-right: 50px;
          color: @gray-99;
          &.active, &:hover {
            color: @user-color;
            .tm-uline;
          }
        }
      }
    }
  }
}

//产品列表
.pro-list-box {
  margin-top: 20px;
  .product-list-bar {
    li {
      .fn-box-shadow(0, 0, 10px, rgba(0, 0, 0, .1));
    }
  }
}

.pro-paging {
  @color: @white;
  @border: #e4e4e4;
  display: block;
  .text-mid-line(30px);
  margin: 40px auto 50px;
  text-align: center;
  span, a {
    display: inline-block;
    color: @gray-33;
    font-size: @fs-14;
  }
  .all {
    display: inline-block;
    margin-right: 10px;
  }
  .select {
    display: inline-block;
    background: @color;
    border: 1px solid @border;
    margin: 0 10px;
    select {
      font-size: @fs-14;
      border: 0 none;
      background: transparent;
      padding: 0 5px;
    }
  }
  .pages {
    display: inline-block;
    font-size: 0;
    a, span {
      height: 30px;
      line-height: 30px;
      padding: 0 12px;
      background: @color;
      border: 1px solid @border;
      border-left: 0 none;
      &.prev {
        border-left: 1px solid @border;
      }
      &.none {
        color: @gray-99;
        cursor: not-allowed;
      }
      &.active {
        background: #03b8ff;
        border: 1px solid #03b8ff;
        color: @color;
      }
    }
  }
  .go {
    display: inline-block;
    margin-left: 10px;
    font-size: @fs-14;
    input {
      display: inline-block;
      width: 32px;
      .tm-center;
      .text-mid-line(30px);
      padding: 0 5px;
      margin: 0 8px;
      background: @color;
      border: 1px solid @border;
    }
  }
}

//产品详情
.pro-details-box {
  .p-rel;
  .fn-box-shadow(0, 0, 10px, rgba(0, 0, 0, .1));
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 40px;
  background: @white;
  .pro-state-img {
    .set-layout("block", 102px, 102px, "absolute");
    z-index: 1001;
    top: 0;
    left: 0;
    i {
      display: block;
      width: 100%;
      height: 100%;
    }
    &.state1 {
      i {
        background-position: 0 0;
      }
    }
    &.state2 {
      i {
        background-position: -103px 0;
      }
    }
    &.state3 {
      i {
        background-position: -207px 0;
      }
    }
    &.state4 {
      i {
        background-position: -311px 0;
      }
    }
    &.state5 {
      i {
        background-position: 0 -103px;
      }
    }
    &.state6 {
      i {
        background-position: -103px -103px;
      }
    }
    &.state7 {
      i {
        background-position: -207px -103px;
      }
    }
    &.state8 {
      i {
        background-position: -311px -103px;
      }
    }
  }
  .details-bar {
    .p-rel;
    padding-left: 440px;
    .fb-img-box {
      .set-layout("block", 400px, 400px, "absolute");
      top: 0;
      left: 0;
      .slider-btn {
        width: 400px;
        margin-left: -200px;
      }
    }
  }
}

//产品内容详情
.details-cont {
  .text() {
    .fs-18;
    color: @gray-33;
  }
  & > h2 {
    .p-rel;
    .tm-bold;
    top: -3px;
    margin-bottom: 27px;
    .text;
  }
  .pro-money {
    margin-bottom: 20px;
    label {
      display: inline-block;
      b {
        display: block;
        .tm-bold;
        .text;
      }
      span {
        .tm-bold;
        .fs-18;
        em {
          .tm-bold;
          .fs-number(42px);
          margin-right: 10px;
        }
      }
    }
  }
  .pro-time {
    .text;
    margin-bottom: 30px;
    .cut-down {
      .tm-bold;
      em {
        margin-left: 5px;
      }
      .loading {
        .tm-light;
        .fs-14;
        color: @gray-99;
      }
    }
  }
  .pro-set-money {
    margin-bottom: 30px;
    .set-sum {
      display: inline-block;
      .text-mid-line(40px);
      .fs-18;
      color: @gray-33;
      & > span {
        float: left;
      }
      .form-input {
        display: inline-block;
        .text-mid-line(32px);
        .p-rel;
        font-size: @fs-14;
        margin-top: 4px;
        input {
          margin-top: 6px;
        }
      }
    }
    .fb-slide-box {
      display: inline-block;
      .fl-right;
    }
  }
  .pro-balance {
    .text-mid-line(40px);
    margin-bottom: 30px;
    .balance-box {
      .fs-18;
      color: @gray-33;
      b {
        .fs-14;
        em {
          .fs-24;
          margin-right: 8px;
        }
      }
    }
    .balance-handle {
      .tm-right;
      float: right;
      width: 300px;
      a {
        display: inline-block;
        width: 120px;
        margin-left: 15px;
      }
    }
  }

  //未登录
  &.state-not-login {
    .pro-money {
      margin-bottom: 21px;
    }
  }
}

//详情页面Tab
.pro-cont-box {
  @user-color: #03bcff;
  .p-rel;
  .fn-box-shadow(0, 0, 10px, rgba(0, 0, 0, .1));
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 0 40px 40px;
  background: @white;
  .link-hover {
    height: 56px;
    color: @user-color;
    background: transparent;
    border-bottom: 3px solid @user-color;
  }
  .slider-tab {
    border: 0 none;
    .slider-tab-menu {
      height: 59px;
      border-bottom: 1px solid #e4e4e4;
      background: transparent;
      li {
        margin-right: 0;
        a {
          .p-rel;
          height: 59px;
          line-height: 60px;
          color: @gray-33;
          em {
            .p-rel;
            top: -10px;
            display: inline-block;
            width: 18px;
            height: 18px;
            line-height: 18px;
            margin-left: 5px;
            background: #ff5151;
            text-align: center;
            .border-radius(50%);
            color: @white;
            font-size: @fs-12;
          }
          &:hover {
            .link-hover;
          }
        }
        &.active {
          a {
            .link-hover;
          }
        }
      }
    }
    .tab-loading {
      display: block;
      position: relative;
      height: 400px;
      background: url("@{imgs}/ggc-loading.gif") no-repeat center;
      background-color: rgba(255, 255, 255, 0.5);
      background-color: transparent \9;
    }
  }
}

//详情内容展示
.product-information {
  display: block;
  padding: 15px 0;
  p {
    margin-bottom: 15px;
  }
  img {
    display: block;
    width: 100%;
    margin-bottom: 15px;
  }
}

//凭证
.product-voucher {
  &:extend(.product-information all);
}

//投资记录
.product-record {
  @user-color: #03bcff;
  display: block;
  padding: 15px 0;
  table {
    width: 100%;
    border: 1px solid #e4e4e4;
    font-size: @fs-18;
    thead {
      background: @user-color;
      color: @white;
      .text-mid-line(60px);
    }
    tbody {
      border-top: 0 none;
      tr {
        .text-mid-line(60px);
        td {
          .tm-center;
        }
      }
    }
  }
}

//投票记录
.product-vote {
  &:extend(.product-record all);
}

//评价
.product-evaluate {
  display: block;
  padding: 15px 0;
  .evaluate-box {
    padding: 40px 80px;
    border: 1px solid #e4e4e4;
    color: @gray-33;
    font-size: @fs-18;
    .border-radius(5px);
    .evaluate-item {
      margin-bottom: 15px;
      .t {
        color: @gray-99;
        display: block;
        width: 180px;
        padding-right: 10px;
        .tm-right;
        .fl-left;
      }
    }
    .evaluate-user {
      .text-mid-line(40px);
      img {
        .set-layout("inline-block", 40px, 40px);
        .border-radius(50%);
        .fl-left;
        margin-right: 10px;
      }
    }
    .evaluate-grade {
      .text-mid-line(26px);
      .c {
        .p-rel;
        top: 3px;
      }
    }
    .evaluate-text {
      .c {
        display: inline-block;
        width: 80%;
        & > .placeholder-bar {
          display: inline-block;
          width: 100%;
          span {
            padding-top: 8px;
            line-height: 30px !important;
          }
        }
        textarea {
          .p-rel;
          top: 3px;
          width: 95%;
          height: 120px;
          padding: 8px;
          border: 1px solid #999999;
          resize: none;
          font-size: @fs-18;
        }
      }
    }
    .evaluate-btn {
      height: 40px;
      padding-right: 20px;
      margin: 15px 0 0 0;
      a {
        width: auto;
        padding: 0 40px;
      }
    }
  }
  .evaluate-list {
    &:extend(.product-record all);
    td {
      vertical-align: top;
      line-height: 30px;
      padding: 20px 10px;
      .text {
        .tm-left;
      }
      .start-box {
        .p-rel;
        top: 3px;
        i {
          cursor: auto;
        }
      }
    }
  }
}

//评价等级
.start-box {
  display: inline-block;
  height: 20px;
  i {
    display: inline-block;
    margin-right: 5px;
    .cursor-pointer;
  }
}

//弹出立即投资
.investment-box {
  .j-disk-text {
    text-align: left;
    padding: 10px 0;
  }
  .j-btn {
    height: 60px;
    a {
      font-size: @fs-20;
      width: 260px;
      margin: auto;
      .fl-none;
      .text-mid-line(40px);
    }
  }
  .investment-cont {
    font-size: @fs-16;
    color: @gray-33;
    .form-input {
      display: inline-block;
      width: 210px;
      &.error {
        & + .form-tips {
          display: block;
        }
      }
    }
    .form-tips {
      display: none;
    }
    .in-select {
      .text-mid-line(40px);
      .t {
        margin-right: 30px;
      }
      .c {
        display: inline-block;
        border: 1px solid #999999;
        .border-radius(5px);
        ul {
          border: 1px solid #999999;
          .border-radius(5px);
        }
      }
    }
    .in-integral {
      .fb-check-box {
        .text-mid-line(24px);
        margin-bottom: 10px;
      }
      .use-integral {
        display: none;
        .fb-inline-block {
          float: left;
        }
        a.fb-btn {
          margin-left: 35px;
        }
      }
    }
    .in-money {
      label {
        display: block;
        margin-bottom: 10px;
        .text-mid-line(30px);
        span {
          display: inline-block;
          width: 120px;
          float: left;
        }
        em {
          .fs-number(24px);
          color: @error-color;
        }
      }
    }
    .in-password {
      & > span {
        float: left;
        display: inline-block;
        .text-mid-line(40px);
      }
      .forget {
        font-size: @fs-12;
        color: @user-color;
        margin-left: 10px;
        .p-rel;
        top: 10px;
        top: 0 \9;
      }
    }
  }
}